<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>询价列表 -供方</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
    </style>
  </head>
  <body>
    <div id="q-rfxSupList" v-cloak>
      <q-layout>
        <q-page-container>
          <q-tabs inverted color="primary" v-model="selectedTab" @select="listGet({pagination: serverPaginationOngoing})">
            <q-tab slot="title" name="ongoing" label="进行中"></q-tab>
            <q-tab slot="title" name="finished" label="已结束"></q-tab>

            <q-tab-pane name="ongoing" class="q-pa-none">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main class="q-px-md q-py-sm">
                  <div class="row justify-start gutter-sm q-px-sm">
                    <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <q-input
                        :float-label="$t('编码')"
                        v-model.trim="searchForm.search_LIKE_name"></q-input>
                    </q-field>
                    <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <q-input
                        :float-label="$t('名称')"
                        v-model.trim="searchForm.search_LIKE_name"></q-input>
                    </q-field>
                    <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <q-select
                        :float-label="$t('发布状态')"
                        :options="aOptions"
                        v-model.trim="searchForm.search_LIKE_name"></q-select>
                    </q-field>
                    <q-slide-transition>
                      <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <q-input
                          :float-label="$t('正式报价')"
                          v-model.trim="searchForm.search_LIKE_name"></q-input>
                      </q-field>
                    </q-slide-transition>
                  </div>
                  <div class="row justify-end q-my-sm">
                    <q-btn
                      size="sm"
                      push
                      color="primary"
                      class="q-mt-sm q-mr-sm q-pa-sm">
                      <span slot="loading">
                        <q-spinner-hourglass></q-spinner-hourglass>
                        搜索中
                      </span>
                      <q-icon name="search"></q-icon>
                      <span>{{ $t('查询') }}</span>
                    </q-btn>
                    <q-btn
                      size="sm"
                      push
                      color="secondary"
                      class="q-mt-sm q-mr-sm q-pa-sm">
                      <span slot="loading">
                        <q-spinner-hourglass></q-spinner-hourglass>
                        重置中
                      </span>
                      <q-icon name="refresh" ></q-icon>
                      <span>{{ $t('重置') }}</span>
                    </q-btn>
                    <q-btn
                      flat
                      size="sm"
                      class="q-mt-sm q-mr-xs q-pa-sm"
                      color="primary"
                      @click="isShowMoreSearch = !isShowMoreSearch">
                      <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                      <span v-else>{{ $t('展开') }}</span>
                      <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                      <q-icon v-else name="keyboard arrow down" ></q-icon>
                    </q-btn>
                  </div>
                  <q-table
                    class="no-shadow"
                    :data="dataOngoing"
                    dense
                    :columns="columnsOngoing"
                    :rows-per-page-options="[5, 10, 20]"
                    selection="multiple"
                    :loading="listLoading"
                    :selected.sync="selectedOngoing"
                    :pagination.sync="serverPaginationOngoing"
                    @request="listGet"
                    row-key="id"
                  >
                    
                  </q-table>
                </q-card-main>
              </q-card>
            </q-tab-pane>
            <q-tab-pane name="finished" class="q-pa-none">

            </q-tab-pane>
          </q-tabs>
        </q-page-container>
      </q-layout>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/rfxSupList.js"></script>

    <script>
			// quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
			new Vue({
        el: '#q-rfxSupList',
        i18n: i18n,
				data: function() {
					return {
            selectedTab: 'ongoing',
            aOptions: [
              {
                label: '已发布',
                value: '1'
              },
              {
                label: '未发布',
                value: '0'
              }
            ],
            isShowMoreSearch: false,
            searchForm: {
              search_LIKE_name: ''
            },
            dataOngoing: [],
            selectedOngoing: [],
            serverPaginationOngoing: {
              page: 1,
              rowsPerPage: 5,
              rowsNumber: 5
            },
            listLoading: false,
          }
				},
				computed: {
					columnsOngoing: function() {
						return [
						
						]
					}
        },
        watch: {
          
        },
        created: function() {
          this.listGet({
            pagination: this.serverPaginationOngoing
          })
        },
				methods: {
					listGet: function(arg) {
            var that = this
            this.listLoading = true
            this.serverPaginationOngoing = arg.pagination
            axios({
              method: 'post',
              url: '/manager/rfqvendor/main/query',
              data: {
                page: this.serverPaginationOngoing.page,
                rows: this.serverPaginationOngoing.rowsPerPage,
                sort: this.serverPaginationOngoing.sortBy,
                order: this.serverPaginationOngoing.descending == true? 'desc' : (this.serverPaginationOngoing.descending == false? 'asc' : null),
                search_EQ_quoteStatus: this.selectedTab == 'ongoing'? 0: '',
                'search_EQ_rfqHeaderEntity.isClose': this.selectedTab == 'finished'? 1: ''
              }
            })
            .then(function(data) {
              console.log(data, 111111)
              that.listLoading = false
            })
            .catch(function(err) {
              console.log(err)
            })
          }
				}
			})
    </script>
  </body>
</html>